<template>
	<view class="content">
		<view class="cu-form-group">
			<view class="title">名称</view>
			<input placeholder="请填写会员卡名称" name="input" v-model="vipName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">价格</view>
			<input placeholder="请填写会员卡价格" name="input" v-model="vipPice"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">种类</view>
			<input placeholder="请填写会员卡种类" name="input" v-model="vipType"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">课时</view>
			<input placeholder="请填写会员卡课时" name="input" v-model="classHours"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">会员卡期限（天）</view>
			<input placeholder="请填写会员卡期限（天）" name="input" v-model="term"></input>
		</view>
		<view class="cu-form-group"  @tap="showModal" data-target="bottomModal">
			<view class="title">可使用产品</view>
			<input  name="input" disabled="disabled"></input>
			<view class="lg text-gray cuIcon-right">
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">是否上架</view>
			 <switch :checked="checkeds" @tap="clickchecked" />
		</view>
		<view class="cu-form-group align-start">
			<view class="title">备注</view>
			<textarea maxlength="-1" :disabled="modalName!=null" v-model="textareaBInput" placeholder=" "></textarea>
		</view>
		<view class="next" @tap="goBack">
			<view class="next2">确认</view>
		</view>
		<!-- 店铺弹出模态框 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog  bg-white">
				<view class="cu-bar">
					<view class="action choose-staff">选择产品</view>
					<view class="action cuIcon-roundclosefill qxmd" @tap="hideModal"></view>
				</view>
				<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0" class="product-modal">
					<view class="index-flex-row flex-item-center _flex_row product-list" v-for="(item,index) in Products" :key="index">
						<view class="product-info _flex_row">
							<image :src="item.imgs" mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<view class="flex-item-center checkbox checkbox-box" @tap="ChoiceProducts(item.id)">
							<image style="width: 44rpx; height: 44rpx;" src="../../../static/images/honggou.png" v-if="item.id==productIds"></image>
						</view>
					</view>
				</scroll-view>
				<view class="next">
					<view class="next3" @tap="hideModal">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal"//弹窗
	import {vipadd,showProductList1,vipCardServiceProducts} from '@/api/index.js';
	export default {
		components: {
			tuiModal,
			
		},
		data() {
			return {
				modalName: null,
				textareaBValue:'',//备注
				checkeds:true,//是否上架
				vipName: '',//会员卡名称
				vipPice: '',//会员卡价格
				vipType: '',//种类
				classHours: '',//课时
				Products: '',//产品信息
				productIds: 0,//选择产品ID
				term: '',//会员期限
				id: -1,
				submission:true,
				vipId: null
			}
		},
		onLoad(data) {
			this.availableProducts();//可使用产品
			console.log(data.id)
			if(data.id!=-1) {//判断是不是修改产品
				this.id = data.id
				let list = JSON.parse(data.item);
				console.log(list)
				this.vipName = list.name  //会员卡名称
				this.vipPice = list.price //会员卡价格
				this.vipType = list.type//种类
				this.classHours = list.classHour//课时
				this.term = list.shelfLifeDays //会员期限
				this.vipId = list.id
				this.getvipCardServiceProducts(list.shopId,list.id)
			}
		},
		methods: {
			//查询会员卡下所有id
			getvipCardServiceProducts(shopId,id) {
				vipCardServiceProducts({
					cardId: id,
					shopId: shopId
				}).then(res=>{
					this.productIds = res.id
				})
			},
			//可使用产品
			availableProducts() {
				showProductList1().then(res=>{
					this.Products = res
				})
			},
			//页面跳转
			toPage(page){
				uni.navigateTo({
					url:page
				});
			},
			// 弹窗
			showModal(e) {
				console.log(e);
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
				
			},
			//多行文本框
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			},
			//短信倒计时
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码";
						this.codeDisabled=false;
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			//产品选择
			ChoiceProducts(id) {
				this.productIds = id
				console.log(id)
			},
			clickchecked() {
				this.checkeds = !this.checkeds
				console.log(this.checkeds)
			},
			goBack() {
				let _this = this
				let remark = _this.textareaBValue//备注
				let cardName = _this.vipName//会员卡名称
				let cardPrice = _this.vipPice//会员卡价格
				let cardType = _this.vipType//种类
				let cardClassHour  = _this.classHours//课时
				let productIds = _this.productIds//选择产品ID
				let shelfLifeDays = _this.term //会员期限
				let shelves = 0
				this.checkeds?shelves = 0:shelves = 1;
				let data = {}
				if( remark == '' || remark == null) {
					data={
						cardClassHour: cardClassHour,
						cardName: cardName,
						cardPrice: cardPrice,
						cardType: cardType,
						productIds: productIds,
						shelfLifeDays: shelfLifeDays,
						shelves: shelves 
					}
				}else {
					data={
						cardClassHour: cardClassHour,
						cardName: cardName,
						cardPrice: cardPrice,
						cardType: cardType,
						productIds: productIds,
						remark: remark,
						shelfLifeDays: shelfLifeDays,
						shelves: shelves 
					}
				}
				if(_this.id!=-1){
					data.id = _this.vipId
					console.log(1)
				}
				if (_this.Judgementempty(cardName,cardPrice,cardType,shelfLifeDays,_this.cliockid,cardClassHour)){
					if(_this.submission==true) {
						vipadd(data).then(res=>{
							console.log(res)
							_this.submission = false
							uni.showToast({
							    title: '加载中',
								icon: 'loading',
								duration: 3000,
								success: function() {
									uni.hideToast();
									uni.redirectTo({
										url: 'card'
									})
									_this.submission = true
								}
							})
							
						})
					}
					
				}

			},
			Judgementempty(cardName,cardPrice,cardType,shelfLifeDays,cliockid,cardClassHour) {
				let r = /^\+?[1-9][0-9]*$/
				if(cardName===''){
					this.$api.msg('请输入会员卡名称');
					return false; 
				}
				if(cardName.length > 8){
					this.$api.msg('会员卡名称不能超过8个字');
					return false; 
				}
				if(cardPrice === ''){
					this.$api.msg('请输入会员卡价格');
					return false; 
				}
				let re = /^\d+(?=\.{0,1}\d+$|$)/ 
				if(!re.test(cardPrice)){
					this.$api.msg('请正确输入会员卡价格');
					return false; 
				}
				if(cardType===''){
					this.$api.msg('请输入种类');
					return false;
				}
				if(cardClassHour === '') {
					this.$api.msg('请输入课时');
					return false;
				}
				if(!r.test(cardClassHour)) {
					this.$api.msg('请正确输入课时');
					return false;
				}
				
				if(shelfLifeDays===''){
					this.$api.msg('请输入会员期限');
					return false;
				}
				if(!r.test(shelfLifeDays)){
					this.$api.msg('请正确输入会员期限');
					return false;
				}
				if(/[\.]/.test(shelfLifeDays)){
					this.$api.msg('请正确输入会员期限');
					return false;
				}
				if(cliockid===-1){
					this.$api.msg('请重新选择产品');
					return false;
				}
				return true;

			}
		}
	}
	
</script>

<style>
	.cu-form-group input{text-align: right;}
	.next{
		margin:0 76rpx;
	}
	.next .next2{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:130rpx auto 0;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.next .next3{
		background: url("../../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 60rpx;
	}
	.choose-staff {
		font-family: PingFangSC-regular;
		text-align: left;
		font-size: 13px;
		color: rgba(106, 106, 106, 1);
	}
	.cu-dialog{
		height:932rpx;
	}
	.product-modal{
		height:690rpx;
		overflow-y: scroll;
	}
	.qxmd {
		width: 50rpx;
		height: 50rpx;
		color: rgba(189, 189, 189, 1);
		font-size: 50rpx;
	}
	.product-list{
		height: 140rpx;
		align-items: center;
		padding:0 30rpx;
	}
	.product-info{
		flex: 1;
		align-items: center;
	}
	.product-info image{
		border: 1px solid #F5F5F5;
		border-radius: 100rpx;
		width:100rpx;
		height:100rpx;
		margin-right: 20rpx;
	}
	.product-info text{
		color: #3E3E3E;
		font-size: 32rpx;
		font-weight: 600;
	}
	.checkbox-box {
		width: 46rpx; 
		height: 46rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
	}
</style>
